<template>
  <div>
    {{$store.state.user.token}}
    {{$store.state.setting.name}}
    <!-- <div>
      token: {{token}}
    </div>
    <div>
      name: {{name}}
    </div>
    <button @click="$store.commit('removeData')">点击隐藏</button>
    <br>
    方法一：
    <button @click="$store.commit('user/removeData')">清除（user）</button>
    <button @click="$store.commit('setting/removeData')">清除（setting）</button> -->

    ================================================
    <!-- <br>
    方法二：
    <button @click="removeData">清除（user）</button> -->
    <!-- <button @click="$store.commit('setting/removeData')">清除（setting）</button> -->

    ===================================================
    <!-- <br>
    方法三：
    <button @click="RemoveData">清除（user）</button> -->
    
    方法四：
    <button @click="removeData">删除</button>
    <button @click="userremoveData">删除</button>
  </div>
</template>

<script>
import {mapGetters, mapMutations, createNamespacedHelpers} from 'vuex'
const {mapMutations:userMapMutations} = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    // ...mapMutations('user', ['removeData']),
    // 方法二
    // ...mapMutations('setting', ['removeData']),

    // 方法三
    // ...mapMutations(['user/removeData']),
    // RemoveData(){
    //   this['user/removeData']()
    // }

    // 方法四：
    ...mapMutations('setting',['removeData']),
    ...userMapMutations({
      userremoveData: 'removeData'
    })
  }
}
</script>

<style>

</style>